<template>
  <ul class="iconlists clearfix">
    <li
      v-for="(item, index) in iconLists"
      :key="index"
      @click="copyIconClassName(item)"
    >
      <i :class="renderIconClassName(item)"></i>
      <div class="name">{{ item }}</div>
    </li>
  </ul>
</template>
<script>
import { defineComponent } from "vue";
import icons from "./icon";
import { Toast } from "../../../components";
export default defineComponent({
  setup() {
    const iconLists = icons;
    const renderIconClassName = (name) => {
      return `vcu-icon vcu-icon-${name}`;
    };
    const copyIconClassName = (name) => {
      const iconComp = `<vcu-icon name="${name}" />`;
      let OrderNumber = iconComp;
      let newInput = document.createElement("input");
      newInput.value = OrderNumber;
      document.body.appendChild(newInput);
      newInput.select();
      document.execCommand("Copy");
      newInput.remove();
      Toast(iconComp);
    };
    return { iconLists, renderIconClassName, copyIconClassName };
  },
});
</script>
<style scoped>
.iconlists {
  width: 100%;
  overflow: hidden;
}
.iconlists li {
  box-sizing: border-box;
  padding: 0 10px;
  float: left;
  width: 33.33%;
  height: 100px;
  text-align: center;
  list-style: none !important;
}
.iconlists .vcu-icon {
  font-size: 40px;
  line-height: 1.5;
  margin-top: 15px;
  color: #333;
  -webkit-transition: font-size 0.25s ease-out 0s;
  -moz-transition: font-size 0.25s ease-out 0s;
  transition: font-size 0.25s ease-out 0s;
}
.iconlists li div {
  word-break: break-all;
  word-wrap: break-word;
  color: #999;
}

.iconlists li div.fontclass {
  display: none;
}
</style>
